<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <title>客户产品管理</title>
    <script src="../../../static/kaige/js/szload.js"></script>
    <style>.layui-table-cell {
        height: auto;
    }</style>
</head>

<body>
<div class="kaige-body">
    <table class="layui-table" id="pageTable" lay-filter="pageTable" lay-size="sm"></table>
    <input type="hidden" name="keywordsCache" value="{}"/>
</div>

<script src="../../../static/lib/jquery-3.6.0.min.js"></script>
<script>
    let jq = jQuery.noConflict();
    load_init_js([
        szoapcpath + '/static/kaige/js/date.js',
        szoapcpath + '/static/kaige/js/search.js',
        szoapcpath + '/static/kaige/js/xm-select.js'
    ], function () {
        layui.config({
            base: szoapcpath + '/static/kaige/layuiextend/'
        }).use(['element', 'table', 'form', 'layer', 'kaige', 'glfiles'], function () {
            var element = layui.element,
                layer = layui.layer,
                table = layui.table,
                form = layui.form,
                kaige = layui.kaige,
                laytpl = layui.laytpl,
                glfiles = layui.glfiles,
                $ = layui.$;
            form.render();

            //系统默认图片
            window.default_image = szoapcpath + "/static/img/default.png";
            //查看图片
            window.viewImage = function (imgUrl) {
                kaige.viewimage({maxwidth: 600, maxheight: 600, url: imgUrl});
            }


            kaige.table({
                elem: '#pageTable',
                url: "/crm.product/index",
                id: 'pageTable',
                toolbar: '#dtoolbar',
                defaultToolbar: ['filter'],
                cols: [[
                    {field: 'id', title: '', align: 'center'},
                    {field: 'type_id', title: '分类ID', align: 'center'},
                    {field: 'name', title: '产品名称', align: 'center', templet: "#nameClick"},
                    {field: 'files_id', title: '产品图片', align: 'center', templet: '#tupian'},
                    {field: 'num', title: '产品编码', align: 'center'},
                    {field: 'unit', title: '单位', align: 'center'},
                    {field: 'price', title: '价格', align: 'center'},
                    {field: 'min_price', title: '最低销售价', align: 'center'},
                    {field: 'cost_price', title: '成本价', align: 'center'},
                    {field: 'description', title: '产品描述', align: 'center'},
                    {field: 'create_time', title: '创建时间', align: 'center'},
                    {title: '操作', toolbar: '#dtrbar', align: 'center', width: 150, fixed: 'right'}
                ]]
            });

            //列表-监听表头工具栏事件dtoolbar
            table.on('toolbar(pageTable)', function (obj) {
                switch (obj.event) {
                    case 'btn-add':
                        btnadd();
                        break;
                }
            });


            window.showDetail = function (e) {
                jq.ajax({
                    type: 'get',
                    url: szoa.client.path + '/pages/crm/product/detail.html',
                    data: {id: e.id},
                    dataType: 'html',
                    success: function (res) {
                        var index2 = layer.open({
                            id: 'detail_form_box',
                            type: 1,
                            anim: 4,
                            offset: 'r',
                            area: ['750px', '100%'],
                            title: "详细页面",
                            content: res,
                            btn: ['确定', '取消'],
                            yes: function (index, layero) {
                                layer.close(index2);
                            },
                            success: function () {
                                var res2 = $("#detailContent").html();
                                laytpl(res2).render(e, function (html) {
                                    $("#showContent").append(html);
                                });
                                console.log("wqwqwq");
                                kaige.table({
                                    elem: '#contentTable',
                                    url: "/crm.product_part/index",
                                    id: 'contentTable',
                                    cols: [[
                                        {field: 'name', title: '产品名称', align: 'center'},
                                        {field: 'files_id', title: '产品图片', align: 'center', templet: '#tupian2'},
                                        {field: 'description', title: '产品描述', align: 'center'},
                                        {field: 'create_time', title: '创建时间', align: 'center'},
                                    ]],
                                    where: {
                                        product_id: e.id
                                    }
                                });

                                table.on('rowDouble(contentTable)', function (obj) {
                                    var data = obj.data;
                                    editRecord(data.id);
                                });

                            }
                        });

                        window.editInfo = function () {
                            baredit(e);
                        };
                    },

                });
            };

            window.tableReload = function () {
                table.reload("contentTable");
            }

            //列表-监听单元格行工具事件dtrbar
            table.on('tool(pageTable)', function (obj) {
                var that = this;
                var data = obj.data;
                switch (obj.event) {
                    case 'edit':
                        baredit(data);
                        break;
                    case 'del':
                        bardel(data);
                        break;
                    case 'showDetail':
                        showDetail(data);
                        break;
                }
            });

            table.on('rowDouble(pageTable)', function (obj) {
                var data = obj.data;
                showDetail(data);
            });


            window.addEditData = function () {
                kaige.xmSelect({
                    id: 'type_id',
                    url: '/select/productType',
                    udata: {automatch: 1},
                    radio: true,
                    clickClose: true
                });
            }

            //添加
            function btnadd() {
                kaige.form({
                    url: "/crm.product/add",
                    data: {},
                    id: 'kaige',
                    area: ['750px', '450px'],
                    title: '<i class="layui-icon layui-icon-add-circle"></i> 添加 - 客户产品管理',
                    tablelayid: 'pageTable',
                    overflow: false,
                    encode: 1,
                    callbefore: function (layero, index) {
                        addEditData();
                    },
                    postbefore: function (updata) {
                        updata.files_id = updata.form_files_id;
                        delete updata.form_files_id;
                        return updata;
                    },
                    getdata: function (res) {
                        var data = (res && res.data && res.data.fi) ? res.data.fi : null;
                        glfiles.form({
                            id: 'form',
                            is_edit: true,
                            data: data
                        });
                    }
                });
            }

            //编辑
            function baredit(d) {
                kaige.form({
                    url: "/crm.product/edit",
                    data: {id: d.id},
                    id: 'kaige',
                    area: ['750px', '450px'],
                    title: '<i class="layui-icon layui-icon-edit"></i> 编辑 - 客户产品管理',
                    tablelayid: 'pageTable',
                    overflow: false,
                    encode: 1,
                    callbefore: function (layero, index) {
                        addEditData();
                    },
                    postbefore: function (updata) {
                        updata.files_id = updata.form_files_id;
                        delete updata.form_files_id;
                        return updata;
                    },
                    getdata: function (res) {
                        var data = (res && res.data && res.data.fi) ? res.data.fi : null;
                        glfiles.form({
                            id: 'form',
                            is_edit: true,
                            data: data
                        });
                    }
                });
            }

            //删除
            function bardel(d) {
                layer.confirm('您确定删除吗？', {
                    title: '<i class="layui-icon layui-icon-delete"></i> 删除确认',
                    btn: ['确认', '取消']
                }, function () {
                    $.post("/crm.product/del", {id: d.id}, function (res) {
                        res.status && table.reload('pageTable');
                        layer.msg(res.msg);
                    });
                });
            };

        });
    })
    ;
</script>
<script type="text/html" id="dtrbar">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-xs" lay-event="edit" title="编辑"><i class="layui-icon layui-icon-edit"></i>
        </button>
        <button class="layui-btn layui-btn-xs" lay-event="del" title="删除"><i class="layui-icon layui-icon-delete"></i>
        </button>
    </div>
</script>

<script type="text/html" id="nameClick">
    <a href="javascript:void(0);" lay-event="showDetail"> {{ d.name }}</a>
</script>

<script type="text/html" id="dtoolbar">
    <div class="layui-btn-container layui-form filter-form" lay-filter="searchform">
        <div class="layui-btn-group">
            <button type="button" class="layui-btn layui-btn-sm" lay-event="btn-add" style="margin-top:2px;"><i
                    class="layui-icon layui-icon-add-circle"></i> 添加
            </button>
        </div>
    </div>
</script>


<script type="text/html" id="tupian">
    <div class="userinfotitle">
        <div class="uif-avatar">
            <a href="javascript:void(0);" onclick="viewImage('{{ d.files_id }}')">
                <img src="{{ d.files_id }}" class="list_avatar1" alt="" width="50px" height="50px"/>
            </a>
        </div>
    </div>
</script>
<script type="text/html" id="kaige_form_html">
    <form class="layui-form layui-form-pane kaige-body-form" style="padding: 5px;" lay-filter="kaige_form_lay_filter">
        {{# if(d.id){ }}
        <input type="hidden" name="id" value="{{ d.id }}"/>
        {{# } }}
        <div class="layui-form-item">
            <label class="layui-form-label">分类ID</label>
            <div class="layui-input-inline">
                <div id="type_id_select_box"></div>
                <input type="hidden" id="type_id" value="{{ d.type_id || '' }}" name="type_id"/>
            </div>
            <label class="layui-form-label">产品名称</label>
            <div class="layui-input-inline">
                <input name="name" value="{{ d.name || '' }}" class="layui-input" type="text">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">产品编码</label>
            <div class="layui-input-inline">
                <input name="num" value="{{ d.num || '' }}" class="layui-input" type="text">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单位</label>
            <div class="layui-input-inline">
                <input name="unit" value="{{ d.unit || '' }}" class="layui-input" type="text">
            </div>
            <label class="layui-form-label">价格</label>
            <div class="layui-input-inline">
                <input name="price" value="{{ d.price || '' }}" class="layui-input" type="text">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">最低销售价</label>
            <div class="layui-input-inline">
                <input name="min_price" value="{{ d.min_price || '' }}" class="layui-input" type="text">
            </div>
            <label class="layui-form-label">成本价</label>
            <div class="layui-input-inline">
                <input name="cost_price" value="{{ d.cost_price || '' }}" class="layui-input" type="text">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">产品描述</label>
            <div class="layui-input-block">
                <input name="description" value="{{ d.description || '' }}" class="layui-input" type="text">
            </div>
        </div>

        <div class="layui-form-item" id="form_files_gl_html"></div>

        <div class="layui-form-item layui-hide">
            <button class="layui-hide" lay-submit="" id="kaige_form_btn_save" lay-filter="kaige_form_btn_save">保存数据
            </button>
        </div>
    </form>
</script>
</body>

</html>